<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BIM智能安全分析平台 - 专业版</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .hover-lift {
            transition: all 0.3s ease;
        }
        
        .hover-lift:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        .progress-bar {
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .animate-pulse-slow {
            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        .file-drop-zone {
            transition: all 0.3s ease;
            border: 2px dashed transparent;
        }
        
        .file-drop-zone:hover,
        .file-drop-zone.dragover {
            border-color: #3b82f6;
            background-color: rgba(59, 130, 246, 0.05);
        }
        
        .score-ring {
            transform: rotate(-90deg);
        }
        
        .floating-card {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 min-h-screen">
    <div id="app">
        <!-- 动态背景粒子 -->
        <div class="fixed inset-0 overflow-hidden pointer-events-none">
            <div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse-slow"></div>
            <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse-slow" style="animation-delay: 2s;"></div>
            <div class="absolute top-1/2 left-1/2 w-80 h-80 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse-slow" style="animation-delay: 4s;"></div>
        </div>

        <!-- 头部导航 -->
        <header class="relative bg-white/80 backdrop-blur-md shadow-lg border-b border-white/20">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex items-center justify-between h-20">
                    <div class="flex items-center space-x-4">
                        <div class="relative">
                            <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl blur opacity-75"></div>
                            <div class="relative bg-gradient-to-r from-blue-600 to-purple-600 p-3 rounded-xl">
                                <i class="fas fa-building text-2xl text-white"></i>
                            </div>
                        </div>
                        <div>
                            <h1 class="text-3xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
                                BIM智能安全分析平台
                            </h1>
                            <p class="text-sm text-gray-600">建筑安全 · 智能诊断 · 一键分析</p>
                        </div>
                    </div>
                    
                    <nav class="flex space-x-1">
                        <button @click="currentTab = 'upload'" 
                                :class="currentTab === 'upload' ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg' : 'text-gray-600 hover:text-gray-900'"
                                class="px-6 py-2.5 rounded-xl font-medium transition-all duration-300 hover-lift">
                            <i class="fas fa-upload mr-2"></i>上传分析
                        </button>
                        <button @click="currentTab = 'history'" 
                                :class="currentTab === 'history' ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg' : 'text-gray-600 hover:text-gray-900'"
                                class="px-6 py-2.5 rounded-xl font-medium transition-all duration-300 hover-lift">
                            <i class="fas fa-history mr-2"></i>历史记录
                        </button>
                        <button @click="currentTab = 'demo'" 
                                :class="currentTab === 'demo' ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg' : 'text-gray-600 hover:text-gray-900'"
                                class="px-6 py-2.5 rounded-xl font-medium transition-all duration-300 hover-lift">
                            <i class="fas fa-play mr-2"></i>演示体验
                        </button>
                        <a href="/ai-rules.html" 
                           class="bg-gradient-to-r from-green-600 to-blue-600 text-white px-6 py-2.5 rounded-xl font-medium transition-all duration-300 hover-lift shadow-lg">
                            <i class="fas fa-robot mr-2"></i>AI规则库
                        </a>
                    </nav>
                </div>
            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <!-- 上传分析页面 -->
            <div v-if="currentTab === 'upload'" class="space-y-8">
                <div class="grid lg:grid-cols-3 gap-8">
                    <!-- 文件上传卡片 -->
                    <div class="lg:col-span-2">
                        <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl p-8 hover-lift">
                            <div class="flex items-center mb-6">
                                <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-3 rounded-xl text-white">
                                    <i class="fas fa-cloud-upload-alt text-xl"></i>
                                </div>
                                <h2 class="text-2xl font-bold text-gray-900 ml-4">智能文件分析</h2>
                            </div>
                            
                            <div class="space-y-6">
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-3">建筑类型选择</label>
                                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                                        <button v-for="type in buildingTypes" :key="type.value"
                                                @click="buildingType = type.value"
                                                :class="buildingType === type.value ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                                class="p-4 rounded-xl text-center transition-all duration-300 hover-lift">
                                            <i :class="type.icon" class="text-2xl mb-2 block"></i>
                                            <span class="text-sm font-medium">{{ type.label }}</span>
                                        </button>
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-3">上传IFC文件</label>
                                    <div class="file-drop-zone bg-gradient-to-br from-gray-50 to-blue-50 rounded-2xl p-8 text-center border-2 border-dashed border-gray-300"
                                         @drop="handleDrop" @dragover.prevent @dragenter="handleDragEnter" @dragleave="handleDragLeave">
                                        <input type="file" accept=".ifc" @change="handleFileSelect" class="hidden" id="fileInput">
                                        <label for="fileInput" class="cursor-pointer">
                                            <div class="bg-gradient-to-r from-blue-100 to-purple-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
                                                <i class="fas fa-file-upload text-3xl text-blue-600"></i>
                                            </div>
                                            <h3 class="text-lg font-semibold text-gray-900 mb-2">拖拽文件到此处</h3>
                                            <p class="text-gray-600 mb-2">或点击选择文件</p>
                                            <p class="text-sm text-gray-500">支持 .ifc 格式文件</p>
                                        </label>
                                    </div>
                                </div>
                                
                                <div v-if="selectedFile" class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-2xl border border-green-200">
                                    <div class="flex items-center">
                                        <div class="bg-green-500 p-2 rounded-full text-white">
                                            <i class="fas fa-check-circle"></i>
                                        </div>
                                        <div class="ml-4">
                                            <p class="font-semibold text-gray-900">{{ selectedFile.name }}</p>
                                            <p class="text-sm text-gray-600">{{ formatFileSize(selectedFile.size) }}</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                    <button @click="startAnalysis" 
                                            :disabled="!selectedFile || isLoading"
                                            class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-4 rounded-xl font-semibold hover:from-blue-700 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-all duration-300 hover-lift shadow-lg">
                                        <span v-if="!isLoading" class="flex items-center justify-center">
                                            <i class="fas fa-magic mr-2"></i>开始智能分析
                                        </span>
                                        <span v-else class="flex items-center justify-center">
                                            <i class="fas fa-spinner fa-spin mr-2"></i>{{ loadingMessage }}
                                        </span>
                                    </button>
                                    
                                    <button @click="loadDemoData" 
                                            :disabled="isLoading"
                                            class="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white py-4 rounded-xl font-semibold hover:from-purple-700 hover:to-pink-700 disabled:from-gray-400 disabled:to-gray-500 transition-all duration-300 hover-lift shadow-lg">
                                        <i class="fas fa-play mr-2"></i>快速演示
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分析进度卡片 -->
                    <div v-if="isLoading" class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl p-6 hover-lift">
                        <div class="flex items-center mb-6">
                            <div class="bg-gradient-to-r from-indigo-600 to-purple-600 p-3 rounded-xl text-white">
                                <i class="fas fa-cog text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 ml-4">分析进度</h3>
                        </div>
                        
                        <div class="space-y-6">
                            <div class="relative">
                                <div class="flex justify-between text-sm font-medium text-gray-700 mb-2">
                                    <span>{{ loadingMessage }}</span>
                                    <span class="text-blue-600">{{ loadingProgress }}%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
                                    <div class="bg-gradient-to-r from-blue-600 to-purple-600 h-3 rounded-full progress-bar" :style="`width: ${loadingProgress}%`"></div>
                                </div>
                            </div>
                            
                            <div class="bg-gradient-to-r from-blue-50 to-purple-50 p-4 rounded-xl">
                                <div class="flex items-center text-sm text-gray-600">
                                    <i class="fas fa-info-circle mr-2 text-blue-600"></i>
                                    <span>正在执行: <span class="font-semibold text-gray-900">{{ currentAnalysisStep }}</span></span>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-4 text-center">
                                <div class="bg-white/50 p-3 rounded-xl">
                                    <div class="text-2xl font-bold text-blue-600">{{ analysisStats.components || 0 }}</div>
                                    <div class="text-xs text-gray-600">建筑组件</div>
                                </div>
                                <div class="bg-white/50 p-3 rounded-xl">
                                    <div class="text-2xl font-bold text-purple-600">{{ analysisStats.checks || 0 }}</div>
                                    <div class="text-xs text-gray-600">安全检查</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分析结果展示 -->
                <div v-if="analysisResult" class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl p-8 hover-lift">
                    <div class="flex items-center justify-between mb-8">
                        <div class="flex items-center">
                            <div class="bg-gradient-to-r from-green-600 to-emerald-600 p-3 rounded-xl text-white">
                                <i class="fas fa-chart-bar text-xl"></i>
                            </div>
                            <h2 class="text-2xl font-bold text-gray-900 ml-4">智能分析报告</h2>
                        </div>
                        <div class="flex space-x-3">
                            <button @click="exportReport('json')" class="bg-gradient-to-r from-green-600 to-emerald-600 text-white px-5 py-2.5 rounded-xl font-medium hover-lift transition-all duration-300">
                                <i class="fas fa-download mr-2"></i>导出JSON
                            </button>
                            <button @click="exportReport('pdf')" class="bg-gradient-to-r from-red-600 to-pink-600 text-white px-5 py-2.5 rounded-xl font-medium hover-lift transition-all duration-300">
                                <i class="fas fa-file-pdf mr-2"></i>导出PDF
                            </button>
                            <button @click="analysisResult = null" class="bg-gray-200 text-gray-700 px-5 py-2.5 rounded-xl font-medium hover-lift transition-all duration-300">
                                <i class="fas fa-times mr-2"></i>关闭
                            </button>
                        </div>
                    </div>
                    
                    <!-- 综合评分仪表盘 -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                        <div class="relative bg-gradient-to-br from-blue-500 to-purple-600 p-6 rounded-2xl text-white hover-lift">
                            <div class="absolute top-4 right-4">
                                <i class="fas fa-shield-alt text-3xl opacity-20"></i>
                            </div>
                            <div class="relative z-10">
                                <div class="text-4xl font-bold mb-1">{{ analysisResult.summary?.safetyScore || 0 }}</div>
                                <div class="text-sm opacity-90">综合安全评分</div>
                                <div class="text-xs opacity-75 mt-1">满分100分</div>
                            </div>
                        </div>
                        
                        <div class="relative bg-gradient-to-br from-red-500 to-pink-600 p-6 rounded-2xl text-white hover-lift">
                            <div class="absolute top-4 right-4">
                                <i class="fas fa-exclamation-triangle text-3xl opacity-20"></i>
                            </div>
                            <div class="relative z-10">
                                <div class="text-4xl font-bold mb-1">{{ getSeverityCount('critical') }}</div>
                                <div class="text-sm opacity-90">紧急问题</div>
                                <div class="text-xs opacity-75 mt-1">需立即处理</div>
                            </div>
                        </div>
                        
                        <div class="relative bg-gradient-to-br from-orange-500 to-red-600 p-6 rounded-2xl text-white hover-lift">
                            <div class="absolute top-4 right-4">
                                <i class="fas fa-exclamation-circle text-3xl opacity-20"></i>
                            </div>
                            <div class="relative z-10">
                                <div class="text-4xl font-bold mb-1">{{ getSeverityCount('high') }}</div>
                                <div class="text-sm opacity-90">严重问题</div>
                                <div class="text-xs opacity-75 mt-1">需优先处理</div>
                            </div>
                        </div>
                        
                        <div class="relative bg-gradient-to-br from-green-500 to-emerald-600 p-6 rounded-2xl text-white hover-lift">
                            <div class="absolute top-4 right-4">
                                <i class="fas fa-coins text-3xl opacity-20"></i>
                            </div>
                            <div class="relative z-10">
                                <div class="text-2xl font-bold mb-1">¥{{ formatCurrency(analysisResult.costEstimation?.totalEstimatedCost || 0) }}</div>
                                <div class="text-sm opacity-90">预估整改费用</div>
                                <div class="text-xs opacity-75 mt-1">市场价格</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 项目信息卡片 -->
                    <div class="bg-gradient-to-r from-gray-50 to-blue-50 p-6 rounded-2xl mb-8">
                        <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center">
                            <i class="fas fa-info-circle text-blue-600 mr-2"></i>项目详情
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="flex items-center">
                                <div class="bg-blue-100 p-2 rounded-full">
                                    <i class="fas fa-building text-blue-600"></i>
                                </div>
                                <div class="ml-3">
                                    <div class="text-sm text-gray-600">项目名称</div>
                                    <div class="font-semibold text-gray-900">{{ analysisResult.summary?.projectName || '未命名项目' }}</div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="bg-purple-100 p-2 rounded-full">
                                    <i class="fas fa-home text-purple-600"></i>
                                </div>
                                <div class="ml-3">
                                    <div class="text-sm text-gray-600">建筑类型</div>
                                    <div class="font-semibold text-gray-900">{{ analysisResult.summary?.buildingType || '未知类型' }}</div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="bg-green-100 p-2 rounded-full">
                                    <i class="fas fa-calendar text-green-600"></i>
                                </div>
                                <div class="ml-3">
                                    <div class="text-sm text-gray-600">分析时间</div>
                                    <div class="font-semibold text-gray-900">{{ formatDate(analysisResult.summary?.analysisTime) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 问题详情列表 -->
                    <div class="space-y-6">
                        <h3 class="text-xl font-bold text-gray-900 flex items-center">
                            <i class="fas fa-list-check text-blue-600 mr-2"></i>发现问题详情
                        </h3>
                        <div class="grid gap-4">
                            <div v-for="(finding, index) in analysisResult.findings" :key="index" 
                                 class="bg-white border-l-4 p-6 rounded-2xl shadow-lg hover-lift transition-all duration-300"
                                 :class="getSeverityGradient(finding.severity)">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center space-x-3 mb-3">
                                            <span class="text-xs px-3 py-1.5 rounded-full font-semibold" :class="getSeverityBadgeClass(finding.severity)">
                                                {{ getSeverityText(finding.severity) }}
                                            </span>
                                            <span class="text-xs px-3 py-1.5 rounded-full bg-blue-100 text-blue-800 font-semibold">
                                                {{ finding.category }}
                                            </span>
                                            <span class="text-xs text-gray-500 bg-gray-100 px-3 py-1.5 rounded-full">
                                                <i class="fas fa-map-marker-alt mr-1"></i>{{ finding.location || '未指定位置' }}
                                            </span>
                                        </div>
                                        <h4 class="text-lg font-bold text-gray-900 mb-2">{{ finding.title || finding.description }}</h4>
                                        <p class="text-gray-700 mb-3">{{ finding.description }}</p>
                                        <div class="flex items-center space-x-6 text-sm">
                                            <span class="text-gray-600">
                                                <i class="fas fa-gavel mr-1 text-blue-600"></i>
                                                标准依据: <span class="font-semibold">{{ finding.code || 'GB规范' }}</span>
                                            </span>
                                            <span class="text-gray-600">
                                                <i class="fas fa-coins mr-1 text-green-600"></i>
                                                预估成本: <span class="font-semibold">¥{{ formatCurrency(finding.estimatedCost || 0) }}</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 整改建议 -->
                    <div v-if="analysisResult.recommendations?.length" class="mt-8">
                        <h3 class="text-xl font-bold text-gray-900 flex items-center mb-6">
                            <i class="fas fa-lightbulb text-yellow-600 mr-2"></i>智能整改建议
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div v-for="(rec, index) in analysisResult.recommendations" :key="index" 
                                 class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-2xl border border-blue-200 hover-lift transition-all duration-300">
                                <div class="flex items-start justify-between mb-4">
                                    <h4 class="text-lg font-bold text-gray-900">{{ rec.category }}</h4>
                                    <span class="text-xs px-3 py-1.5 rounded-full font-semibold" :class="getPriorityBadgeClass(rec.priority)">
                                        {{ rec.priority }}
                                    </span>
                                </div>
                                <div class="space-y-3">
                                    <div class="flex items-center text-sm">
                                        <i class="fas fa-clock mr-2 text-blue-600"></i>
                                        <span class="text-gray-600">处理时间: <span class="font-semibold">{{ rec.timeline }}</span></span>
                                    </div>
                                    <div class="flex items-center text-sm">
                                        <i class="fas fa-dollar-sign mr-2 text-green-600"></i>
                                        <span class="text-gray-600">预算: <span class="font-semibold">¥{{ formatCurrency(rec.estimatedCost || 0) }}</span></span>
                                    </div>
                                    <div>
                                        <h5 class="text-sm font-semibold text-gray-900 mb-2">整改措施:</h5>
                                        <ul class="space-y-1">
                                            <li v-for="(item, i) in rec.recommendations" :key="i" 
                                                class="text-sm text-gray-700 flex items-start">
                                                <i class="fas fa-check-circle text-green-600 mr-2 mt-0.5 text-xs"></i>
                                                {{ item }}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 历史记录页面 -->
            <div v-if="currentTab === 'history'" class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl p-8 hover-lift">
                <div class="flex items-center mb-8">
                    <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-3 rounded-xl text-white">
                        <i class="fas fa-history text-xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900 ml-4">历史分析记录</h2>
                    <div class="ml-auto">
                        <span class="text-sm text-gray-600">共 {{ historyRecords.length }} 条记录</span>
                    </div>
                </div>
                
                <div v-if="historyRecords.length === 0" class="text-center py-16">
                    <div class="bg-gradient-to-r from-gray-100 to-gray-200 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-inbox text-4xl text-gray-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">暂无历史记录</h3>
                    <p class="text-gray-600 mb-6">上传文件开始分析后，记录将显示在这里</p>
                    <button @click="currentTab = 'upload'" 
                            class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-medium hover-lift transition-all duration-300">
                        <i class="fas fa-upload mr-2"></i>开始分析
                    </button>
                </div>
                
                <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div v-for="record in historyRecords" :key="record.id"
                         class="bg-white p-6 rounded-2xl shadow-lg hover-lift transition-all duration-300 cursor-pointer"
                         @click="viewRecord(record)">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <h3 class="font-bold text-gray-900 truncate mb-1">{{ record.projectName }}</h3>
                                <p class="text-sm text-gray-600">{{ record.buildingType }}</p>
                            </div>
                            <div class="text-right">
                                <div class="text-3xl font-bold" :class="getScoreColor(record.safetyScore)">
                                    {{ record.safetyScore }}
                                </div>
                                <div class="text-xs text-gray-500">安全评分</div>
                            </div>
                        </div>
                        
                        <div class="space-y-3">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-600">
                                    <i class="fas fa-calendar mr-1"></i>
                                    {{ formatDate(record.analysisTime) }}
                                </span>
                                <span class="text-sm font-semibold text-blue-600">
                                    ¥{{ formatCurrency(record.estimatedCost) }}
                                </span>
                            </div>
                            
                            <div class="flex space-x-2">
                                <span class="text-xs px-2 py-1 rounded-full bg-red-100 text-red-800 font-medium">
                                    {{ record.criticalCount }} 紧急
                                </span>
                                <span class="text-xs px-2 py-1 rounded-full bg-orange-100 text-orange-800 font-medium">
                                    {{ record.highCount }} 严重
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 演示页面 -->
            <div v-if="currentTab === 'demo'" class="text-center">
                <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl p-12 max-w-2xl mx-auto hover-lift">
                    <div class="bg-gradient-to-r from-purple-100 to-pink-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-magic text-4xl text-purple-600"></i>
                    </div>
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">体验完整分析功能</h2>
                    <p class="text-lg text-gray-600 mb-8">使用预设数据演示完整的BIM安全分析流程，包含所有智能检测功能</p>
                    <button @click="loadDemoData" 
                            :disabled="isLoading"
                            class="bg-gradient-to-r from-purple-600 to-pink-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover-lift transition-all duration-300 disabled:from-gray-400 disabled:to-gray-500 shadow-lg">
                        <span v-if="!isLoading" class="flex items-center">
                            <i class="fas fa-play mr-2"></i>开始演示体验
                        </span>
                        <span v-else class="flex items-center">
                            <i class="fas fa-spinner fa-spin mr-2"></i>加载中...
                        </span>
                    </button>
                </div>
            </div>
        </main>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    currentTab: 'upload',
                    buildingType: 'office',
                    buildingTypes: [
                        { value: 'office', label: '办公楼', icon: 'fas fa-building' },
                        { value: 'residential', label: '住宅楼', icon: 'fas fa-home' },
                        { value: 'commercial', label: '商业楼', icon: 'fas fa-store' },
                        { value: 'industrial', label: '工业楼', icon: 'fas fa-industry' },
                        { value: 'hospital', label: '医院', icon: 'fas fa-hospital' },
                        { value: 'school', label: '学校', icon: 'fas fa-school' }
                    ],
                    selectedFile: null,
                    isLoading: false,
                    loadingProgress: 0,
                    loadingMessage: '',
                    currentAnalysisStep: '',
                    analysisStats: { components: 0, checks: 0 },
                    analysisResult: null,
                    historyRecords: [],
                    isDragging: false
                }
            },
            methods: {
                handleFileSelect(event) {
                    const file = event.target.files[0];
                    if (file && file.name.toLowerCase().endsWith('.ifc')) {
                        this.selectedFile = file;
                    } else {
                        this.showNotification('请选择IFC格式文件', 'error');
                    }
                },
                handleDrop(event) {
                    event.preventDefault();
                    this.isDragging = false;
                    const file = event.dataTransfer.files[0];
                    if (file && file.name.toLowerCase().endsWith('.ifc')) {
                        this.selectedFile = file;
                    } else {
                        this.showNotification('请选择IFC格式文件', 'error');
                    }
                },
                handleDragEnter() {
                    this.isDragging = true;
                },
                handleDragLeave() {
                    this.isDragging = false;
                },
                formatFileSize(bytes) {
                    if (bytes === 0) return '0 Bytes';
                    const k = 1024;
                    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
                },
                formatCurrency(amount) {
                    return new Intl.NumberFormat('zh-CN').format(amount);
                },
                formatDate(dateString) {
                    return new Date(dateString).toLocaleDateString('zh-CN', {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit'
                    });
                },
                getSeverityText(severity) {
                    const map = {
                        'critical': '紧急',
                        'high': '严重',
                        'medium': '中等',
                        'low': '轻微'
                    };
                    return map[severity] || severity;
                },
                getSeverityCount(severity) {
                    if (!this.analysisResult?.findings) return 0;
                    return this.analysisResult.findings.filter(f => f.severity === severity).length;
                },
                getSeverityGradient(severity) {
                    const map = {
                        'critical': 'border-l-red-500 bg-gradient-to-r from-red-50 to-pink-50',
                        'high': 'border-l-orange-500 bg-gradient-to-r from-orange-50 to-red-50',
                        'medium': 'border-l-yellow-500 bg-gradient-to-r from-yellow-50 to-orange-50',
                        'low': 'border-l-green-500 bg-gradient-to-r from-green-50 to-emerald-50'
                    };
                    return map[severity] || 'border-l-gray-500 bg-gray-50';
                },
                getSeverityBadgeClass(severity) {
                    const map = {
                        'critical': 'bg-red-100 text-red-800',
                        'high': 'bg-orange-100 text-orange-800',
                        'medium': 'bg-yellow-100 text-yellow-800',
                        'low': 'bg-green-100 text-green-800'
                    };
                    return map[severity] || 'bg-gray-100 text-gray-800';
                },
                getPriorityBadgeClass(priority) {
                    const map = {
                        'critical': 'bg-red-100 text-red-800',
                        'high': 'bg-orange-100 text-orange-800',
                        'medium': 'bg-yellow-100 text-yellow-800',
                        'low': 'bg-green-100 text-green-800'
                    };
                    return map[priority] || 'bg-gray-100 text-gray-800';
                },
                getScoreColor(score) {
                    if (score >= 80) return 'text-green-600';
                    if (score >= 60) return 'text-yellow-600';
                    return 'text-red-600';
                },
                showNotification(message, type = 'info') {
                    // 简单的通知提示
                    alert(message);
                },
                async startAnalysis() {
                    if (!this.selectedFile) return;

                    this.isLoading = true;
                    this.loadingProgress = 0;
                    this.analysisResult = null;
                    this.analysisStats = { components: 0, checks: 0 };

                    const steps = [
                        { progress: 5, message: '正在上传文件...', step: '文件上传' },
                        { progress: 15, message: '正在解析IFC文件...', step: '文件解析' },
                        { progress: 30, message: '正在提取建筑数据...', step: '数据提取' },
                        { progress: 45, message: '正在分析消防安全...', step: '消防安全' },
                        { progress: 60, message: '正在分析结构安全...', step: '结构安全' },
                        { progress: 75, message: '正在分析疏散路线...', step: '疏散分析' },
                        { progress: 85, message: '正在分析无障碍设施...', step: '无障碍分析' },
                        { progress: 95, message: '正在生成智能报告...', step: '报告生成' },
                        { progress: 100, message: '分析完成！', step: '完成' }
                    ];

                    for (let i = 0; i < steps.length; i++) {
                        const step = steps[i];
                        this.loadingProgress = step.progress;
                        this.loadingMessage = step.message;
                        this.currentAnalysisStep = step.step;
                        this.analysisStats.components = Math.floor(Math.random() * 100) + 50;
                        this.analysisStats.checks = Math.floor(Math.random() * 50) + 20;
                        await new Promise(resolve => setTimeout(resolve, 800));
                    }

                    try {
                        await new Promise(resolve => setTimeout(resolve, 1000));
                        
                        this.analysisResult = {
                            summary: {
                                projectName: this.selectedFile.name.replace('.ifc', ''),
                                buildingType: this.getBuildingTypeText(this.buildingType),
                                safetyScore: Math.floor(Math.random() * 25) + 75,
                                totalComponents: Math.floor(Math.random() * 150) + 100,
                                analysisTime: new Date().toISOString()
                            },
                            findings: [
                                {
                                    type: '消防安全',
                                    severity: 'critical',
                                    title: '安全出口数量不足',
                                    description: '建筑安全出口数量不足，至少需要2个安全出口，当前仅发现1个主要出口，存在严重安全隐患。',
                                    location: '一层大厅',
                                    code: 'GB50016-2014 5.5.8',
                                    estimatedCost: 25000
                                },
                                {
                                    type: '结构安全',
                                    severity: 'high',
                                    title: '承重墙厚度不足',
                                    description: '部分承重墙厚度小于240mm，不符合规范要求，可能影响建筑结构稳定性。',
                                    location: '二层东侧',
                                    code: 'GB50010-2010 6.3.1',
                                    estimatedCost: 35000
                                },
                                {
                                    type: '无障碍',
                                    severity: 'medium',
                                    title: '无障碍通道宽度不足',
                                    description: '主入口无障碍通道宽度小于1.2米，不符合无障碍设计规范要求。',
                                    location: '主入口',
                                    code: 'GB50763-2012 3.5.1',
                                    estimatedCost: 8000
                                }
                            ],
                            costEstimation: {
                                totalEstimatedCost: 68000,
                                breakdown: {
                                    fireSafety: 25000,
                                    structural: 35000,
                                    accessibility: 8000
                                }
                            },
                            recommendations: [
                                {
                                    category: '消防安全',
                                    priority: 'critical',
                                    timeline: '7天内',
                                    estimatedCost: 25000,
                                    recommendations: ['增加安全出口', '安装应急照明系统', '设置疏散指示标识', '配置消防报警系统']
                                },
                                {
                                    category: '结构加固',
                                    priority: 'high',
                                    timeline: '30天内',
                                    estimatedCost: 35000,
                                    recommendations: ['承重墙加固', '结构补强处理', '专业检测评估', '加固方案设计']
                                }
                            ]
                        };

                        this.saveToHistory(this.analysisResult);

                    } catch (error) {
                        this.showNotification('分析失败，请重试', 'error');
                    } finally {
                        this.isLoading = false;
                    }
                },
                async loadDemoData() {
                    this.isLoading = true;
                    this.loadingProgress = 0;
                    this.loadingMessage = '正在加载演示数据...';

                    try {
                        const steps = [
                            { progress: 25, message: '正在加载演示项目...' },
                            { progress: 50, message: '正在生成智能数据...' },
                            { progress: 75, message: '正在计算安全评分...' },
                            { progress: 100, message: '演示数据加载完成！' }
                        ];

                        for (const step of steps) {
                            this.loadingProgress = step.progress;
                            this.loadingMessage = step.message;
                            await new Promise(resolve => setTimeout(resolve, 600));
                        }
                        
                        this.analysisResult = {
                            summary: {
                                projectName: "智能办公楼演示项目",
                                buildingType: "现代化办公楼",
                                safetyScore: 82,
                                totalComponents: 127,
                                analysisTime: new Date().toISOString()
                            },
                            findings: [
                                {
                                    type: '消防安全',
                                    severity: 'high',
                                    title: '疏散通道宽度优化',
                                    description: '部分疏散通道宽度可进一步优化，建议增加至1.4米以上以提升疏散效率。',
                                    location: '标准层走廊',
                                    code: 'GB50016-2014',
                                    estimatedCost: 15000
                                }
                            ],
                            costEstimation: {
                                totalEstimatedCost: 15000
                            },
                            recommendations: [
                                {
                                    category: '疏散优化',
                                    priority: 'medium',
                                    timeline: '15天内',
                                    estimatedCost: 15000,
                                    recommendations: ['通道宽度调整', '标识优化', '应急照明升级']
                                }
                            ]
                        };

                    } catch (error) {
                        this.showNotification('加载演示数据失败', 'error');
                    } finally {
                        this.isLoading = false;
                    }
                },
                getBuildingTypeText(type) {
                    const map = {
                        'office': '办公楼',
                        'residential': '住宅楼',
                        'commercial': '商业楼',
                        'industrial': '工业楼',
                        'hospital': '医院',
                        'school': '学校'
                    };
                    return map[type] || type;
                },
                saveToHistory(result) {
                    const record = {
                        id: Date.now().toString(),
                        projectName: result.summary.projectName,
                        buildingType: result.summary.buildingType,
                        safetyScore: result.summary.safetyScore,
                        analysisTime: result.summary.analysisTime,
                        criticalCount: this.getSeverityCount('critical'),
                        highCount: this.getSeverityCount('high'),
                        estimatedCost: result.costEstimation.totalEstimatedCost
                    };
                    
                    this.historyRecords.unshift(record);
                    localStorage.setItem('bimHistory', JSON.stringify(this.historyRecords));
                },
                viewRecord(record) {
                    this.analysisResult = {
                        summary: {
                            projectName: record.projectName,
                            buildingType: record.buildingType,
                            safetyScore: record.safetyScore,
                            analysisTime: record.analysisTime
                        },
                        findings: [],
                        costEstimation: { totalEstimatedCost: record.estimatedCost }
                    };
                    this.currentTab = 'upload';
                },
                exportReport(format) {
                    this.showNotification(`${format.toUpperCase()}导出功能开发中...`, 'info');
                },
                loadHistory() {
                    try {
                        const saved = localStorage.getItem('bimHistory');
                        if (saved) {
                            this.historyRecords = JSON.parse(saved);
                        }
                    } catch (error) {
                        console.error('加载历史记录失败:', error);
                    }
                }
            },
            mounted() {
                this.loadHistory();
            }
        }).mount('#app');
    </script>
</body>
</html>